<template>
	<view class="addAddress">
	  <form @submit="formSubmit" @reset="formReset">
		<!-- 收货人 -->
		<view class="add_input">
			<view class="input_lable">收货人</view>
			<view class="view_input">
				<input type="text" placeholder="输入名称" placeholder-class="placeholder_class" maxlength="30" v-model="receiver">
			</view>
		</view>
		<!-- 联系电话 -->
		<view class="add_input">
			<view class="input_lable">联系电话</view>
			<view class="view_input">
				<input type="number" placeholder="输入号码" placeholder-class="placeholder_class" maxlength="30"  v-model="phoneVal">
			</view>
		</view>
		<!-- 所在地区 -->
		<view class="add_input" @click="showMulLinkageThreePicker">
			<view class="input_lable">所在地区</view>
			<view class="Area">
				<text class="Area_addresss">{{cityText}}</text>
				<view class="Area_img">
					<text>请选择</text>
					<image src="../../../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
				</view>
			</view>
		</view>
		<!-- 详细地址 -->
		<view class="add_input">
			<view class="input_lable">详细地址</view>
			<view class="view_input">
				<input type="text" placeholder="输入详细地址" placeholder-class="placeholder_class" maxlength="60" v-model="Address">
			</view>
		</view> 
		<!-- 保存 -->
		<view class="save">
			<button @click="checkPhone()">保存</button>
		</view>
	  </form>
	  <!-- 广告 -->
	  <view class="AD">
	  	<text>技术支持：</text>
	  	<image src="../../../../static/images/log_03.png" style="width:30upx;height:24upx"></image>
	  	<text>掌邦科技</text>
	  </view>
	  <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
	   @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../../components/mpvue-citypicker/city-data/city.js';
	export default {
		data() {
			return {
				phoneVal:"",
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#f2526f',
				pickerText: '',
				cityText:'广东深圳市龙岗区',
				text:"",
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				receiptDate:"",
				receiver:"",
				Address:"",
				userID:2,
				id:1,
				isDefault:0,
			};
		},
		methods:{
		  verification(){
		  			  if(this.name==""){
		  				  uni.showToast({
		  				  	title:"收货人不能为空",
		  				  	duration:1000,
		  				  	mask:true,
		  				  	icon:"none"
		  				   })
		  			  }
		  			  if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
		  			  		 this.forbidden=false
		  			  			uni.showToast({
		  			  				title: '手机号码有误，请重填',
		  			  				duration: 1000,
		  			  				icon :"none",
		  			  				position:"top",
		  			  				mask:true
		  			  			});
		  			        return false; 
		  			  } 
		  			  if(this.cityText==""){
		  			  		uni.showToast({
		  			  		title:"所在地区不能为空",
		  			  		duration:1000,
		  			  		mask:true,
		  			  		icon:"none"
		  			  		})
		  			  }
		  },
		  checkPhone(){ 
			  let that=this;
			  that.verification();
			  let address=that.cityText+that.Address;
			  let id=parseInt(that.id);
			  let userID=parseInt(that.userID);
			  let isDefault=parseInt(that.isDefault);
			  if(this.Address==""){
			  		uni.showToast({
			  			title:"详细地址不能为空",
			  			duration:1000,
			  			mask:true,
			  			icon:"none"
			  		 })
			  }else{
				 uni.request({
				 	url: this.$store.state.URL + '/user/address/edit',
				 	data: {
				 		token: this.$store.state.token,
				 		id:id,
				 		userID:userID,
				 		name:that.receiver,
				 		mobile:that.phoneVal,
				 		address:address,
				 		isDefault:isDefault,
				 		isDelete:0,
				 	},
				 	method:"POST",
				 	success(res) {
				 		if(res.data.status==true){
				 			uni.showToast({
				 				title:"已修改",
				 				duration:1000,
				 				mask:true
				 			})
				 			setTimeout(function(){  
				 				uni.navigateBack({
				 				  	 delta: 1
				 				});
				 			}, 1000);
				 		}
				 	} 
				 })   
			  }
         },
          // 三级联动选择
          showMulLinkageThreePicker() {
          	this.$refs.mpvueCityPicker.show();
          },
		  onConfirm(e) {
		  	this.pickerText = JSON.parse(JSON.stringify(e));
			var text=this.pickerText;
			var addressText=text.label;
			var cityText=addressText.replace(/-/g,"");
			this.cityText=cityText;
		  },
		  onBackPress() {
		    if (this.$refs.mpvueCityPicker.showPicker) {
		    	this.$refs.mpvueCityPicker.pickerCancel();
		      return true;
		    }
		  },
		  onUnload() {
		  	if (this.$refs.mpvueCityPicker.showPicker) {
		  		this.$refs.mpvueCityPicker.pickerCancel()
		  	}
		  },
		},
		onLoad:function(options){
			//获取地址信息
			var receiptDate = JSON.parse(options.receiptDate);
			this.receiver=receiptDate.name;
			this.phoneVal=receiptDate.mobile;
			this.id=receiptDate.id;
			this.userID=receiptDate.userID;
			this.isDefault=receiptDate.isDefault;
			var allAddress=receiptDate.address;
			var lenght=allAddress.length;
			var index=allAddress.lastIndexOf("区");
			this.cityText=allAddress.substring(0,index+1);
			this.Address=allAddress.substring(index+1,lenght);
		},
		components: {
			mpvueCityPicker
		},
	}
</script>

<style>
page{
	background:#F5F5F5;
}
.add_input{
	display: flex;
	justify-content: flex-start;
	background:#fff;
	padding:32upx 0;
	border-bottom:1upx solid #e0e0e0;
	position: relative;
}
.Area_img{
	position: absolute;
	right:0upx;
	top:26upx;
}
.Area_img text{
	margin-right: 20upx;
}
.Area_addresss{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:426upx;
	display: inline-block;
}
.arrow_icon{
	 width:15upx;
	 height:36upx;
	 position: relative;
	 top:8upx;
}
.add_input view{
	margin:0 20upx;
}
.add_input .input_lable{
	font-size:30upx;
	color:#222222;
	margin-top:6upx;
	width:130upx;
}
.placeholder_class{
	font-size:28upx;
	color:#999999;
}
.add_input{
	font-size:28upx;
	color:#333333;
}
.save{
	text-align: center;
	margin-top:30upx;
}
.save button{
	width:710upx;
	heihgt:80upx;
	background:#f2526f;
	font-size:30upx;
	color:#fff;
}
.AD{
	position: absolute;
	bottom: 0;
	left:50%;
	margin-left: -18%;
	margin-bottom:15upx ;
}
.AD text{
	font-size:20upx;
	color:#999;
	margin:0 10upx;
}
.view_input{
	width:70%;
}
</style>
